<template>
  <header
    class="sticky top-0 z-[100] bg-bg-primary border-b border-border-color backdrop-blur-[10px] transition-all duration-300"
  >
    <nav class="mx-auto px-8 py-6 flex justify-between items-center">
      <NuxtLink
        to="/"
        class="gradient-text text-3xl font-bold no-underline transition-transform duration-300 hover:scale-110"
      >
        董泓林的博客
      </NuxtLink>

      <div class="hidden md:flex items-center gap-8">
        <NuxtLink
          to="/"
          class="nav-link text-text-secondary font-medium text-lg relative transition-colors duration-300 hover:text-text-primary no-underline"
        >
          首页
        </NuxtLink>
        <NuxtLink
          to="/blog"
          class="nav-link text-text-secondary font-medium text-lg relative transition-colors duration-300 hover:text-text-primary no-underline"
        >
          博客
        </NuxtLink>
        <NuxtLink
          to="/resume"
          class="nav-link text-text-secondary font-medium text-lg relative transition-colors duration-300 hover:text-text-primary no-underline"
        >
          简历
        </NuxtLink>

        <button
          class="bg-transparent border-2 border-border-color rounded-xl px-3 py-2 cursor-pointer text-xl transition-all duration-300 flex items-center justify-center hover:rotate-[20deg] hover:scale-110 hover:border-[#667eea]"
          aria-label="切换主题"
          @click="toggleTheme"
        >
          <span v-if="colorMode.value === 'dark'">🌙</span>
          <span v-else>☀️</span>
        </button>
      </div>

      <!-- 移动端菜单按钮 -->
      <button
        class="md:hidden flex flex-col gap-1.5 bg-transparent border-none cursor-pointer p-2"
        @click="toggleMobileMenu"
      >
        <span class="w-[25px] h-0.5 bg-text-primary transition-all duration-300"></span>
        <span class="w-[25px] h-0.5 bg-text-primary transition-all duration-300"></span>
        <span class="w-[25px] h-0.5 bg-text-primary transition-all duration-300"></span>
      </button>
    </nav>

    <!-- 移动端菜单 -->
    <div
      v-show="mobileMenuOpen"
      class="md:hidden glass flex flex-col py-4 px-8 gap-4 border-t border-border-color"
    >
      <NuxtLink
        to="/"
        class="mobile-nav-link text-text-primary font-medium text-lg py-3 px-3 rounded-lg transition-all duration-300 hover:bg-bg-secondary no-underline"
        @click="closeMobileMenu"
      >
        首页
      </NuxtLink>
      <NuxtLink
        to="/blog"
        class="mobile-nav-link text-text-primary font-medium text-lg py-3 px-3 rounded-lg transition-all duration-300 hover:bg-bg-secondary no-underline"
        @click="closeMobileMenu"
      >
        博客
      </NuxtLink>
      <NuxtLink
        to="/resume"
        class="mobile-nav-link text-text-primary font-medium text-lg py-3 px-3 rounded-lg transition-all duration-300 hover:bg-bg-secondary no-underline"
        @click="closeMobileMenu"
      >
        简历
      </NuxtLink>
    </div>
  </header>
</template>

<script setup>
const colorMode = useColorMode()
const mobileMenuOpen = ref(false)

const toggleTheme = () => {
  colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}

const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value
}

const closeMobileMenu = () => {
  mobileMenuOpen.value = false
}
</script>

<style scoped>
/* 导航链接下划线动画效果 - 需要保留自定义样式 */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 20%,
    #f093fb 40%,
    #f5576c 60%,
    #feca57 80%,
    #48dbfb 100%
  );
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.router-link-active::after {
  width: 100%;
}
</style>
